<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'user-success.jsp' starting page</title>
    <script src="js/jquery.min.js"></script>
	<script src="js/jquery.Jcrop.min.js"></script>
	<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
  </head>
  
  <body>
 	 <table>
			<tr>
				<td>
					<img src="upload/${myFileFileName }" id="target" alt="Flowers" name="myimage"/>
					
				</td>
				<td>
					<div style="width:100px;height:100px;overflow:hidden;">
						<img src="upload/${myFileFileName }" id="preview" alt="Preview" name="smallimage"/>
					</div>
				</td>
			</tr>
		</table>
  
  
  
  	<!-- This is the form that our event handler fills -->
	<div class="jc_coords">
		<form action="save.action" method="post" >
			<input type="hidden" name="imagename" value="${myFileFileName }"/>
			<input type="hidden" id="x" name="x" value="0"/>
			<input type="hidden" id="y" name="y" value="0"/>
			<input type="hidden" id="w" name="w" value="100"/>
			<input type="hidden" id="h" name="h" value="100"/>
			<input type="submit" value="Crop Image" />
			
		</form>
	</div>
	   
	   
   <script type="text/javascript">
   
   $(document).ready(function(){
	   $("#target").Jcrop({
		    aspectRatio: 1,
		    onChange: showPreview,
			onSelect: showPreview,
			
	   },function(){
	        // Use the API to get the real image size
	        var bounds = this.getBounds();
	        boundx = bounds[0];
	        boundy = bounds[1];
	        // Store the API in the jcrop_api variable
	        jcrop_api = this;
	  });
	   
	function showPreview(coords){
	   	var rx = 100 / coords.w;
	   	var ry = 100 / coords.h;
	   	
	   	$('#x').val(coords.x);
		$('#y').val(coords.y);
		$('#w').val(coords.w);
		$('#h').val(coords.h);

	   	$("#preview").css({
	   		width: Math.round(rx * boundx) + 'px',
	   		height: Math.round(ry * boundy) + 'px',
	   		marginLeft: '-' + Math.round(rx * coords.x) + 'px',
	   		marginTop: '-' + Math.round(ry * coords.y) + 'px'
	   	});
	   
	   }
	
	  
   });
   
   </script>
  </body>
</html>
